<template>
<div class="echart">
    <div id="myChart" :style="{ width: '95%',height: '400px',backgroundColor: '#fff'}"></div>
    </div>
</template>

<script>
import * as echarts from "echarts/core";
import { GridComponent } from "echarts/components";
import { LineChart } from "echarts/charts";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);
export default {
  name: "echarts",
  data() {
    return {
     
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      var chartDom = document.getElementById("myChart");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            smooth: true,
            color:'red'
          },
          {
            data: [120, 332, 201, 334, 190, 330, 209],
            type: "line",
            smooth: true,
            color:'rgb(16, 160, 243)'
          },
          {
            data: [220, 332, 401, 534, 690, 730, 909],
            type: "line",
            smooth: true,
            color:'rgb(236, 240, 14)'
          },
        ],
      };
      option && myChart.setOption(option);
    },
  },
};
</script>

<style>
.echart{
    width: 100%;
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
canvas{
    width: 1300px !important;
    height: 400px !important;
}
</style>
